<template>
  <div class="box-card">
    <el-container>
      <el-header height="57px" class="pass-header">
        <div class="my-el-tabs">
          <el-tabs v-model="activePane">
            <el-tab-pane label="总览" name="allPass" />
            <el-tab-pane label="直塞" name="throughPass" />
            <el-tab-pane label="传中" name="cross" />
            <el-tab-pane label="长传" name="longPass" />
            <el-tab-pane label="创造机会" name="keyPass" />
          </el-tabs>
        </div>
      </el-header>
      <el-main class="pass-main">
        <allPass :playerId="playerId" v-show="activePane === 'allPass'" />
        <Crosses :playerId="playerId" v-show="activePane === 'cross'" />
        <throughPass
          :playerId="playerId"
          v-show="activePane === 'throughPass'"
        />
        <longPass :playerId="playerId" v-show="activePane === 'longPass'" />
        <keyPass :playerId="playerId" v-show="activePane === 'keyPass'" />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import allPass from "../../../differentPass/AllPass";
import throughPass from "../../../differentPass/ThroughPass";
import Crosses from "../../../differentPass/Crosses";
import longPass from "../../../differentPass/LongPass";
import keyPass from "../../../differentPass/KeyPass";
export default {
  name: "Organize",
  props: {
    playerId: {
      type: Number,
    },
  },
  components: {
    allPass,
    throughPass,
    Crosses,
    longPass,
    keyPass,
  },
  data() {
    return {
      activePane: "allPass",
    };
  },
};
</script>

<style scoped>
.box-card {
  margin: auto;
  width: 1440px;
  height: 553px;
}
.pass-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #194568;
  padding: 0;
}
.pass-main {
  height: 496px;
  padding: 0;
  background-color: #f1f6f9;
}
.my-el-tabs {
  margin-top: 15px;
  margin-right: 25px;
}
.my-el-tabs /deep/ .el-tabs__item {
  color: white;
  font-size: 20px;
  font-weight: bold;
}
.my-el-tabs /deep/ .el-tabs__nav-wrap::after {
  height: 0;
}
.my-el-tabs /deep/ .el-tabs__active-bar {
  height: 3px;
  background-color: #16c79a;
}
.my-el-tabs /deep/ .el-tabs__item:hover {
  color: #16c79a;
}
.my-el-tabs /deep/ .el-tabs__item.is-active {
  color: #16c79a;
}
</style>
